{% extends "base.html" %}

{% block subtitle %}
  {{ title }}
{% endblock subtitle %}

{% block header_js %}
  {{ super() }}
  {% if exploration_version %}
    <script type="text/javascript">
      GLOBALS.INTERACTION_SPECS = JSON.parse('{{INTERACTION_SPECS|js_string}}');
      GLOBALS.explorationVersion = JSON.parse('{{exploration_version|js_string}}');
    </script>
  {% endif %}

  {{dependencies_html}}
{% endblock header_js %}

{% block navbar_breadcrumb %}
  <ul class="nav navbar-nav oppia-navbar-breadcrumb">
    <li>
      <span class="oppia-navbar-breadcrumb-separator"></span>
      {{exploration_title}}
    </li>
  </ul>
{% endblock navbar_breadcrumb %}

{% block local_top_nav_options %}
  <ul class="nav navbar-nav oppia-navbar-nav navbar-right" ng-controller="LearnerLocalNav" style="margin-right: 0px;">
    <li class="dropdown">
      <a href="" tooltip="Share" tooltip-placement="left" class="dropdown-toggle oppia-share-dropdown-toggle" data-toggle="dropdown">
        <span class="glyphicon glyphicon-share"></span>
      </a>
      <ul class="dropdown-menu oppia-share-dropdown-menu" role="menu" ng-mouseover="onMouseoverDropdownMenu($event)" ng-mouseleave="onMouseoutDropdownMenu($event)">
        <li>
          <!-- TODO(wagnerdmike): Share link still doesn't show snippet image, name, or description. -->
          <a ng-href="https://plus.google.com/share?url=<[serverName]>/explore/<[explorationId]>"
             onclick="javascript:window.open(this.href,
                      '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
             tooltip="Google+" tooltip-placement="left">
            <img src="https://www.gstatic.com/images/icons/gplus-64.png"
                 alt="Share on Google+"/>
          </a>
        </li>
        <li>
          <a href="" ng-click="showEmbedExplorationModal(explorationId)" tooltip="Embed" tooltip-placement="left">
            <img src="/third_party/static/material-design-icons-1.0.1/ic_link_black_48dp.png">
          </a>
        </li>
      </ul>
    </li>
    <li>
      <a href="" tooltip="Feedback" tooltip-placement="bottom" ng-click="showFeedbackModal()">
        <span class="glyphicon glyphicon-comment"></span>
      </a>
    </li>
    {% if can_edit %}
      <li>
        <a ng-href="/create/<[explorationId]>" tooltip="Edit" tooltip-placement="bottom" target="_blank">
          <span class="glyphicon glyphicon-pencil"></span>
        </a>
      </li>
    {% endif %}
  </ul>
{% endblock local_top_nav_options %}

{% block content %}
  {{ skin_tag }}
  <br><br><br>
  {% if not iframed %}
    {% include 'attribution_guide.html' %}
  {% endif %}

  <script type="text/ng-template" id="modals/playerFeedback">
    <div class="modal-header">
      <h3>
        <span ng-if="!stateName">
          Give Feedback on this Exploration
        </span>
        <span ng-if="stateName">
          Give Feedback on this Card
        </span>
      </h3>
    </div>

    <div class="modal-body">
      <p>
        <em>
          The feedback you write here will be sent to the editors of this exploration.
          To give general feedback about Oppia, please use the <a href="https://code.google.com/p/oppia/issues/list"> bug tracker</a> or <a href="https://groups.google.com/forum/?fromgroups#!forum/oppia-dev">Google Group</a> instead. Thanks in advance!
        </em>
      </p>

      <div role="form">
        <div class="form-group">
          <label for="subject">Subject</label>
          <input type="text" class="form-control" id="subject" ng-model="subject">
        </div>
        <label for="feedback">Feedback</label>
        <textarea id="feedback" class="form-control" ng-model="feedback" rows="6" cols="200" placeholder="Please write your feedback or suggestions for the exploration editors here."></textarea>
        <div ng-show="isLoggedIn">
          <hr>
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="isSubmitterAnonymized">
              Give feedback anonymously
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" ng-click="cancel()">Cancel</button>
      <button class="btn btn-success" ng-click="submit(subject, feedback, isSubmitterAnonymized)" ng-disabled="!feedback">Submit</button>
    </div>
  </script>

  <script type="text/ng-template" id="modals/playerFeedbackConfirmation">
    <div class="modal-header">
      <h3>Thank you for giving feedback</h3>
    </div>

    <div class="modal-body">
      <p>
        Your feedback has been successfully submitted, and the exploration editors will see it when they next visit the exploration editing page.
      </p>
      <p>
        Thank you for helping to improve this exploration!
      </p>
    </div>

    <div class="modal-footer">
      <button class="btn btn-default" ng-click="cancel()">Close</button>
    </div>
  </script>

  {% include 'components/exploration_embed_button.html' %}
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('components/explorationEmbedButton.js') }}
    {{ include_js_file('player/PlayerServices.js') }}
    {{ include_js_file('player/StateTransitionService.js') }}
    {{ include_skins_js_file(skin_js_url) }}
  </script>

  {{ skin_templates }}
  {{ interaction_templates }}
{% endblock footer_js %}
